<template>
  <div>
    <el-divider content-position="left">商品列表</el-divider>
      <el-table :data="commonditylist">
        <el-table-column label="封面" prop="commondity_img" width="200px">
          <template slot-scope="scope">
            <img :src="scope.row.commondity_img" alt="" width="100px" >
          </template>
        </el-table-column>
        <el-table-column label="名称" prop="commondity_name" width="300px" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column id="desc" label="介绍" prop="commondity_description" width="300px"
          :show-overflow-tooltip="true"></el-table-column>
        <el-table-column label="价格" prop="commondity_price" width="150px">
          <template slot-scope="scope">
            {{ scope.row.commondity_price }}元
          </template>
        </el-table-column>
        <el-table-column label="状态" prop="commondity_state" width="200px" align="center">
          <template slot-scope="scope">
            <el-button v-if="scope.row.commondity_state == 1" type="success">审核通过</el-button>
            <el-button v-if="scope.row.commondity_state == 0" type="primary">未审核</el-button>
            <el-button v-if="scope.row.commondity_state == 2" type="danger">未通过</el-button>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="220px" prop="commondity_id">
          <template slot-scope="scope">
            <el-row>
              <el-button type="primary"
                @click="changeState(scope.row.commondity_id)" >通过审核</el-button>
            </el-row>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination style="margin-top:20px;" background layout="->,prev, pager, next,jumper" :page-size="pagesize" :total="total" 
        :current-page="page"  @current-change="handleSizeChange($event)">
      </el-pagination>
  </div>
</template>

<script>
import httpApi from '@/http';
  export default {
    data() {
      return {
        commonditylist:[],
        page:1,
        pagesize:5,
        total:'',
      }
    },
    methods: {
      queryAllComList(page) {
        let params={page:page,pagesize:5}
        httpApi.petshopApi.queryAllCommondityUn(params).then(res=>{
          console.log(res)
          this.commonditylist= res.data.data.data
          this.total=res.data.data.total
        })
      },
      handleSizeChange(page) {
        this.queryAllComList(page)
        this.page = page
        console.log(this.page)
      
      },
      changeState(id){
                let params={state:1,commondity_id:id}
                httpApi.petshopApi.updateComState(params).then(res=>{
                    console.log(res)
                    if(res.data.code==200){
                        this.queryAllComList(1)
                    }
                })
            }
    },
    
    mounted () {
      this.queryAllComList(1)
    },
    
  }
</script>

<style lang="scss" scoped>

</style>